<template>
    <div>
        <!-- key是vue里面用来管理元素复用的属性. 没有key的时候尽可能复用. key相同会复用 在列表里面
            给不同key反而可以提高 删除 添加 排序等等性能 key独一无二.不用 直接删除不要去diff比较.
        -->
        <!-- {{插值}} -->
        <!-- <div v-html="" v-text="" v-once="" v-cloak></div> -->
        <div v-for="i in people" :key="rr" v-if="true"></div>
        <div v-else-if="false" ref=""></div>
        <!-- v-if 首次 v-show 区别? -->
        <!--  v-model是一个语法糖. 是表单数据 和 表单事件的简写语法糖. 不同表单 绑定属性和事件不一样 -->
        <!-- <input type="text" v-model="user"/> -->
        <!--  -->
        <!-- <div v-bind:style="[{color:'red',fontSize:'20px'}]"></div> -->
        <!-- <div v-on:click="js表达式"></div> -->
    </div>
</template>
<script setup>

</script>
<script>
export default{
    data(){ return {}},
    methods:{}
}
</script>
<script>
    // createApp({
    //     data(){},
    //     method:{}
    // })
    // app.components("abc",{})
    export default {//选项式api options API
        props:[],
        emits:[],
        provide:{},
        inject:[""],//如果要传递响应式数据应该用 computed()  this.$parent
        data(){
            return {
                xx:00,
                username:"laoxie",
                product:[]
            }
        },
        methods:{
            abc(){ this.xx;},
            add(uname){
                this.username+=uname;
            },
            delete(){
                this.username="";
            },
            edit(uname){
                this.username=uname;
            },
            addProduct(p){
                this.product.push(p)
            },
            removeP(id){
                this.product=this.product.filter(t=>t!=id);
            },
            eidt(id){
                this.product=this.product.map(t=>{
                    t.id==id?t.text='hello':'';
                    return t;
                })
            }
        },
        computed:{
            qxboss(){
                return this.username;
            },
            allprocut(){
                return this.product;
            },
            hotproduct(){
                return this.product.filter(t=>t.hot);
            }
        },
        watch:{
            username(newValue){
                console.log("新老板来了,赶紧发起ajax请求",newValue)
            }
        },
        components:{},
        beforeCreate(){},
        created(){}, //construtctor(){}
        beforeMount(){}, //componentDidMount(){}
        mounted(){},
        beforeUpdate(){},
        updated(){},//this.$nextTick(()=>{}) //一般用在数据更新以后要获取最新的dom元素
        beforeUnmount(){},//停止定时器  解除事件绑定...
        unmounted(){} //数据可以调用 方法没有
    }
    //vm 组件实例的属性  this.$parant  this.$refs.xxx this.$emit() this.$nextTick()
    // this.$watch() this.$el 
</script>

<style lang="scss" scoped>

</style>